<template>
    <!-- <el-dialog v-model="isShow" size="50%" :destroy-on-close="true" @close="closeHandle"> -->
    <el-drawer v-model="isShow" :title="title" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="form" label-width="auto" ref="formRef">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="警务区编号" required>
                        <el-input v-model="form.code" placeholder="警务区编号:建议前缀+单位ID" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="警务区名称" required>
                        <el-input v-model="form.areaname" placeholder="请输入警务区名称" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="警务区类型" required>
                        <el-select v-model="form.areatype">
                            <el-option v-for="item in nj_policearea_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="建设日期" required>
                        <el-date-picker v-model="form.builddate" type="date" placeholder="请选择建设日期" style="width: 100%;"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="警务区地址">
                        <el-input v-model="form.address" placeholder="请输入警务区地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="房间信息">
                        <el-input v-model="form.roominfo" placeholder="请输入房间信息" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="终端IP地址">
                        <el-input v-model="form.ipAddress" placeholder="请输入终端IP地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="终端端口号">
                        <el-input v-model="form.port" @input="validateNumber" maxlength="5" placeholder="请输入终端端口号" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属单位" required>
                        <el-tree-select v-model="form.unitId" :data="deptOptions" default-expand-all
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }" value-key="deptId"
                            placeholder="选择所属单位" check-strictly :disabled="isButtonDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" required>
                        <el-radio-group v-model="form.state">
                            <el-radio v-for="(item, index) in sys_normal_disable" :key="'roomStatus' + index"
                                :value="item.value">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <el-button @click="cancel">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";

import { createPoliceArea, editPoliceArea, getPoliceAreaInfo } from "@/api/PoliceAreaManage/PoliceAreaManage";

import { getUserProfile } from "@/api/system/user";
import { listDept, } from "@/api/system/dept";
const { proxy } = getCurrentInstance()

const { sys_normal_disable, nj_policearea_type } = proxy.useDict('sys_normal_disable', 'nj_policearea_type')
// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 部门
const department = ref([])
// 所属单位
const deptOptions = ref([]);
// 通知事件
const emit = defineEmits(['getPoliceAreaList'])
// 警务区
const form = ref({
    areaname: '',
    code: '',
    areatype: '',
    builddate: '',
    address: '',
    roominfo: '',
    unitId: 100,
    state: '0',
})
// 关闭后回调
const defaultQuery = {
    areaname: undefined,
    code: undefined,
    areatype: undefined,
    builddate: undefined,
    address: undefined,
    roominfo: undefined,
    unitId: undefined,
    state: '0'
}
const deptqueryParams = ref({
    status: undefined
})
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const isButtonDisabled = ref(false);
const  validateNumber = () => {
  // 只保留数字和空字符串
  form.value.useman = form.value.useman.replace(/[^0-9]/g, '');
}
// 获取个人信息
const getUserInfo = async () => {
    getUserProfile().then(res => {
        form.value.unitId = res.data.deptId
    })
}

//添加警务区
const showAddDrawer = (data_deptId) => {
    title.value = '添加警务区';
    reset();
    // isButtonDisabled.value = false;
    getDepartment(data_deptId)
    changeShowStatus()
}

//修改警务区
const showEditDrawer = async (data) => {
    title.value = '修改警务区'
    await getPoliceAreaInfo(data.policeareaId).then(res => {
        form.value = res.data
        form.value.unitId = Number(res.data.unitId)
    })
    isButtonDisabled.value = true;
    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })

    changeShowStatus()
}
defineExpose({ showAddDrawer, showEditDrawer })

onMounted(() => {
    // getDepartment()
})

//获取单位（部门）列表
const getDepartment = async (data_deptId) => {
    console.log(data_deptId)
    if (data_deptId == "") {
        // getUserInfo();//找当前登录用户所在部门  
        isButtonDisabled.value = false;
    } else {
        form.value.unitId = data_deptId
        isButtonDisabled.value = true;
    }
    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })
}

const submitHandle = async () => {
    if (form.value['policeareaId']) {
        await editPoliceArea(form.value).then(res => {
            changeShowStatus()
            emit('getPoliceAreaList', '来了老弟')
        })
    } else {
        await createPoliceArea(form.value).then(res => {
            changeShowStatus()
            emit('getPoliceAreaList', '来了老弟')
        })
    }
}

// 关闭后的回调事件
const closeHandle = () => {
    form.value = defaultQuery
}
/** 重置操作表单 */
function reset() {
    form.value = {
        areaname: undefined,
        code: undefined,
        areatype: undefined,
        builddate: undefined,
        address: undefined,
        roominfo: undefined,
        unitId: undefined,
        state: '0',
    };
    proxy.resetForm("formRef");
};
/** 取消按钮 */
const cancel = () => {
    isShow.value = false
    reset();
}
</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>